<template>
  <div class="title-body">
    <div class="title">
      <div :class="type === '1' ? 'title-left-h' : 'title-left'"></div>
      <div class="title-box">
        <div :class="type === '1' ? 'title-content title-color-h' : 'title-content title-color'">{{ title }}</div>
      </div>
      <div :class="type === '1' ? 'title-right-h' : 'title-right'"></div>
    </div>
    <div :class="type === '1' ? 'title-color-h title-pinyin' : 'title-pinyin title-color'">{{ pinyin }}</div>
  </div>
</template>
<script>


export default {
  props: {
    title: String,
    pinyin: String,
    type: String
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.title-body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 36px 0 12px 0
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-color {
  color: #237CBE;
}

.title-color-h {
  color: #fff;
}

.title-box {
  margin: 0 14px;
}

.title-content {
  font-size: 32px;
  font-weight: 600;
}

.title-pinyin {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

.title-left {
  width: 170px;
  height: 2px;
  background-size: cover;
  background: url('../assets/img/home/title_left.png') no-repeat center center;
}

.title-left-h {
  width: 170px;
  height: 2px;
  background-size: cover;
  background: url('~@/assets/img/home/12.png') no-repeat center center;
}

.title-right {
  width: 170px;
  height: 2px;
  background-size: cover;
  background: url('../assets/img/home/title_right.png') no-repeat center center;
}

.title-right-h {
  width: 170px;
  height: 2px;
  background-size: cover;
  background: url('~@/assets/img/home/13.png') no-repeat center center;
}
</style>
